<template>
  <div id="cancelled">
    <div v-if="!isWX" class="bra"></div>
    <!-- mobile -->
    <div class="mobile" :class="{ topBrace: isWX }">
      <div class="order-item" v-for="item in currentData" :key="item.id">
        <div class="order-item-top">
          <span>订单号：{{ item.order_sn }}</span>
          <span>已取消</span>
        </div>

        <div class="order-item-center">
          <img :src="show_url + item.images[0]" />
          <div class="orderInfo">
            <p>
              <span>{{ descSubstring(item.goods_name) }}</span>
              <span>
                {{ descSubstring(item.goods_desc) }}
              </span>
            </p>
            <p>
              <span>¥</span><span>{{ item.price }}</span>
            </p>
          </div>
        </div>
      </div>

      <div class="nullBox" v-if="currentData.length <= 0">
        <img src="@/assets/images/mobile_black/center/null.png" />
        <p>暂无已取消的商品哦～</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getMyOrderListApi } from "@/api";
import { iscode, isWeixin, escapeHTML } from "@/utils";

export default {
  name: "Cancelled",
  data() {
    return {
      // 当前拥有的商品
      currentData: [],
      // 当前默认页
      currentPage: 1,
      // 每页显示多少条
      perPage: 10000,
      // 是否是微信
      isWX: false,
    };
  },
  computed: {
    // 用户信息
    ...mapState(["userInfo"]),
  },
  created() {
    if (isWeixin()) {
      this.isWX = true;
    } else {
      this.isWX = false;
    }
  },
  mounted() {
    this.getMyOrderList();

    let cardCount = JSON.parse(localStorage.getItem("cardCount"));
    cardCount.over_pay_num = this.userInfo.over_pay_num;
    localStorage.setItem("cardCount", JSON.stringify(cardCount));
  },
  methods: {
    // -----异步相关方法-----
    // 获取订单列表
    async getMyOrderList() {
      let result = await getMyOrderListApi({
        page: this.currentPage,
        pagesize: this.perPage,
        status: -1, //"status":-1 已取消 1已支付 0未支付, 不传该字段为全部
      });
      if (iscode(result)) {
        this.show_url = result.result.show_url;
        this.total = result.result.count;
        this.currentData = result.result.list;
        // 去除末尾的 #0
        this.currentData.map(item => {
          this.$set(item, 'goods_name', item.goods_name.split('#')[0])
        })
      }
    },

    // ----- common ------
    descSubstring(desc) {
      let res = escapeHTML(desc);
      let result = "";
      if (res.length > 30) {
        result = res.substring(0, 30) + "...";
        return result;
      } else {
        return res;
      }
    },

    // -----跳转相关的方法-----
    // 跳转到查看藏品界面
    gotoShowCollection(product) {
      this.$router.push({
        path: "/mail/showCollection",
        query: {
          id: product.id,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.bra {
  width: 100%;
  height: 90px;
}

// mobile (<=768px)
@media screen and (max-width: 768px) {
  #cancelled {
    position: absolute;
    // top: 90px;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: scroll;

    .topBrace {
      margin-top: 90px !important;
    }

    // mobile wrapper
    .mobile {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      // height: 100%;
      padding: 40px 30px 20px 30px;

      .van-list {
        width: 100%;
      }

      // 每一条订单
      .order-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: #2b2c2d;
        box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
        border-radius: 12px;
        margin-bottom: 30px;
        padding: 0 30px;

        // top
        .order-item-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 84px;
          border-bottom: 2px solid #333333;

          span {
            font-size: 24px;
            color: #aaaaaa;
            line-height: 24px;
          }

          span:nth-child(1) {
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            max-width: 80%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          span:nth-child(2) {
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #aaaaaa;
          }
        }

        // center
        .order-item-center {
          display: flex;
          align-items: center;
          height: 238px;
          border-bottom: 2px solid #333333;

          img {
            width: 180px;
            height: 180px;
          }

          .orderInfo {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 30px;
            height: 180px;
            width: 420px;

            p {
              margin: 0;
            }

            p:nth-child(1) {
              display: flex;
              flex-direction: column;

              span:nth-child(1) {
                width: 420px;
                font-size: 28px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 36px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              span:nth-child(2) {
                width: 420px;
                font-size: 24px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 24px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 20px;
              }
            }

            p:nth-child(2) {
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #00ffb0;
              line-height: 28px;

              span:nth-child(1) {
                font-size: 20px;
              }

              span:nth-child(2) {
                font-size: 24px;
                margin-left: 3px;
              }
            }
          }
        }
      }
    }

    // 数据空时的提示语
    .nullBox {
      margin: 194px auto 0 auto;

      img {
        width: 430px;
        height: 400px;
      }

      p {
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 28px;
        margin-top: 50px;
        text-align: center;
      }
    }
  }
}
</style>
